<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入赛事名称" v-model="searchParam.SEARCH_LIKE_name" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" type="default" icon="el-icon-search" @click="searchReset"> 重置</el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         width="60" height="60" class="img" alt=""/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled></el-switch>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <span v-else-if="column.prop === 'type'">
                        {{ scope.row['type'] | formatTypeId(typeList) }}
                    </span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="140" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row,1)"> 查看</el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row,2)"> 审核</el-button>
<!--                                        <el-button v-if="scope.row.state === 0" type="primary" size="mini"-->
<!--                                                   @click="handleCheck(scope.row.id)">-->
<!--                                            审核-->
<!--                                        </el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'查看':'审核'" width="45%" top="5vh" :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false">
            <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" style="width: 80%" disabled>

                <el-form-item label="赛事名称" prop="name">
                    <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入赛事名称"/>
                </el-form-item>
                <el-form-item label="地区" prop="provinceCode">
                    <area-cascade v-model="areaCasResult" placeholder="请输入地区"/>
                </el-form-item>
                <el-form-item label="赛事分类" prop="type">
                    <el-select v-model="dataForm.type" placeholder="请选择赛事分类">
                        <el-option v-for="type in typeList"
                                   :key="type.id"
                                   :label="type.name"
                                   :value="type.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="比赛要求" prop="description">
                    <el-input v-model="dataForm.description" auto-complete="off" placeholder="请输入比赛要求"/>
                </el-form-item>
                <el-form-item label="参赛人数" prop="signCount">
                    <el-input v-model="dataForm.signCount" auto-complete="off" placeholder="请输入参赛人数"/>
                </el-form-item>
                <el-form-item label="参赛范围" prop="matchGroup">
                    <el-select v-model="dataForm.matchGroup" placeholder="请选择参赛范围">
                        <el-option label="单人" :value="1"></el-option>
                        <el-option label="团体" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="参赛项目" prop="itemNames">
                    <el-input v-model="dataForm.itemNames" auto-complete="off" placeholder="请输入参赛人数"/>
                </el-form-item>
                <el-form-item label="付费方式" prop="payType">
                    <el-radio-group v-model="dataForm.payType">
                        <el-radio :label="0">免费</el-radio>
                        <el-radio :label="1">可用金币</el-radio>
                        <el-radio :label="2">纯钱</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="报名价格" prop="signPrice">
                    <el-input v-model="dataForm.signPrice" auto-complete="off" placeholder="请输入报名价格"/>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="dataForm.startTime"
                                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="dataForm.endTime"
                                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="审核状态" prop="state">
                    <el-radio-group v-model="dataForm.state">
                        <el-radio :label="0">待审核</el-radio>
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审核备注信息" prop="remark">
                    <el-input v-model="dataForm.remark" auto-complete="off"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="this.dataFormFlag == 2" size="mini" @click.native="handleCheckMatch(dataForm.id)"
                           :loading="editLoading">拒绝
                </el-button>
                <el-button v-if="this.dataFormFlag == 2" size="mini" @click.native="handleCheck(dataForm.id,1)"
                           :loading="editLoading"
                           type="primary">通过
                </el-button>
            </div>
        </el-dialog>

        <el-dialog :title="checkMatchName" :visible.sync="getCheckMatchVisible">
            <el-form :model="checkForm" ref="checkForm">
                <el-form-item label="审核备注" prop="remark">
                    <el-input type="textarea" v-model="checkForm.remark" autocomplete="off"
                              placeholder="请输入审核备注"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="handleSubmit()" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import {checkMatch, getCheckList, getJdMatchTypeList} from '@/api/modules/match'
import AreaCascade from '@/components/AreaCascade/indexMatch.vue'

export default {
    name: 'match',
    components: {
        Pagination,
        AreaCascade
    },
    directives: {},
    filters: {
        formatTypeId(value, List) {
            const item = List.find(item => item.id === value)
            return item ? item.name : ""
        }
    },
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            //赛事分类列表
            typeList: [],
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: {pageNum: 1, pageSize: 10,},
            searchParam: {},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            dataFormFlag: 1, // 1是查看 2是审核
            editLoading: false,//保存表单时loading框
            columns: [
                // {prop: 'id', label: '', sortable: false},
                {prop: 'mobile', label: '发布机构手机号', sortable: false},
                {prop: 'name', label: '赛事名称', sortable: false},
                // {prop: 'province', label: '省', sortable: false},
                // {prop: 'city', label: '市', sortable: false},
                // {prop: 'area', label: '县', sortable: false},
                {prop: 'type', label: '赛事分类', sortable: false},
                {prop: 'description', label: '比赛要求', sortable: false},
                {prop: 'signCount', label: '参赛人数', sortable: false},
                {
                    prop: 'matchGroup', label: '参赛范围', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '单人', value: 1, type: 'success'},
                        {text: '团体', value: 2, type: 'warning'}
                    ]
                },
                {
                    prop: 'matchType', label: '参赛类型', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '单人单项比赛', value: 1, type: 'success'},
                        {text: '单人多项比赛', value: 2, type: 'warning'},
                        {text: '多人多项比赛', value: 3, type: 'error'}
                    ]
                },
                {prop: 'itemNames', label: '赛事项目', sortable: false},
                {
                    prop: 'payType', label: '付费方式', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '免费', value: 0, type: 'warning'},
                        {text: '可用金币', value: 1, type: 'success'},
                        {text: '纯钱', value: 2, type: 'success'}
                    ]
                },
                {prop: 'signPrice', label: '报名价格', sortable: false},
                {
                    prop: 'state', label: '状态', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '待审核', value: 0, type: 'warning'},
                        {text: '审核通过', value: 1, type: 'success'},
                        {text: '审核拒绝', value: 2, type: 'error'}
                    ]
                },
                {prop: 'startTime', label: '开始时间', sortable: false, width: 140},
                {prop: 'endTime', label: '结束时间', sortable: false, width: 140},
                // {prop: 'cu', label: '创建机构', sortable: false},
                // {prop: 'ct', label: '创建时间', sortable: false},
            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            areaCasResult: {
                province: '',
                provinceCode: '',
                city: '',
                cityCode: '',
                country: '',
                countryCode: '',
            },
            //表单检验规则
            dataFormRules: {
                id: [{required: true, message: '请输入', trigger: 'blur'}],
                name: [{required: true, message: '请输入赛事名称', trigger: 'blur'}],
                province: [{required: true, message: '请选择省市县', trigger: 'blur'}],
                city: [{required: true, message: '请输入市', trigger: 'blur'}],
                area: [{required: true, message: '请输入县', trigger: 'blur'}],
                type: [{required: true, message: '请输入赛事分类', trigger: 'blur'}],
                description: [{required: true, message: '请输入比赛要求', trigger: 'blur'}],
                signCount: [{required: true, message: '请输入参赛人数', trigger: 'blur'}],
                matchGroup: [{required: true, message: '请选择参赛范围（1单人/2团体）', trigger: 'blur'}],
                matchItem: [{required: true, message: '请选择参赛项目（1单项/2多项）', trigger: 'blur'}],
                payType: [{required: true, message: '请选择付费方式 0免费1可用金币2纯钱', trigger: 'blur'}],
                startTime: [{required: true, message: '请输入开始时间', trigger: 'blur'}],
                endTime: [{required: true, message: '请输入结束时间', trigger: 'blur'}],
                cu: [{required: true, message: '请输入创建机构', trigger: 'blur'}],
                ct: [{required: true, message: '请输入创建时间', trigger: 'blur'}],
                signPrice: [{required: true, message: '请输入创建时间', trigger: 'blur'}],
                itemNames: [{required: true, message: '请输入创建时间', trigger: 'blur'}],
            },

            //审核信息
            matchId: "",
            checkMatchName: '审核备注',
            getCheckMatchVisible: false, // 属性值列表页 隐藏
            // 新增编辑界面数据
            checkForm: {},
            columnCheckMatch: [
                {prop: 'remark', label: '用户编号', sortable: false},
            ],
        }
    },
    watch: {
        areaCasResult: {
            immediate: true,
            handler(val) {
                this.dataForm.province = val.province
                this.dataForm.provinceCode = val.provinceCode
                this.dataForm.city = val.city
                this.dataForm.cityCode = val.cityCode
                this.dataForm.area = val.country
                this.dataForm.areaCode = val.countryCode
            }
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getCheckList(this.pageRequest).then(response => {
                response = response.result
                this.tableList = response.list
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //按钮点击 审核
        handleCheck(id, state) {
            debugger;
            this.matchId = id
            const params = {
                state: state,
                id: id,
                remark: "审核通过"
            }
            // 【API请求】----比赛审核 通过
            checkMatch(params).then(response => {
                this.dialogFormVisible = false
                this.getList()// 重新获取表格数据
                this.$notify({title: '成功', message: '已审核通过', type: 'success', duration: 2000})
            }).catch(() => {
                this.dialogFormVisible = false
                this.getList()
            })
        },
        //点击拒绝， 输入拒绝原因
        handleCheckMatch(id) {
            this.matchId = id
            this.getCheckMatchVisible = true
            this.dialogFormVisible = false
        },
        //点击提交，处理拒绝申请
        handleSubmit() {
            const state = 2
            const params = {
                state: state,
                id: this.matchId,
                remark: this.checkForm.remark
            }
            // 【API请求】----文章审核 拒绝
            checkMatch(params).then(response => {
                this.getCheckMatchVisible = false
                this.getList()// 重新获取表格数据
                this.$notify({title: '成功', message: '已审核拒绝', type: 'success', duration: 2000})
            }).catch(() => {
                this.getCheckMatchVisible = false
                this.getList()
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出编辑表单
        handleUpdate(row,flag) {
            if(flag == 1){
                this.operation = false;
            }
            this.dataFormFlag = flag;
            const provinceCode = row.provinceCode + ""
            const cityCode = row.cityCode + ""
            const countryCode = row.areaCode + ""
            this.areaCasResult = {provinceCode, cityCode, countryCode}
            this.dataForm = Object.assign({}, row)
            //显示编辑菜单
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //初始化表单数据，重新渲染
        initDataForm() {
            this.dataForm = {
                id: '',
                name: '',
                province: '',
                provinceCode:'',
                city: '',
                area: '',
                type: '',
                description: '',
                signCount: '',
                matchGroup: '',
                matchItem: '',
                payType: '',
                startTime: '',
                endTime: '',
                cu: '',
                ct: '',
                state: '',
                remark: '',
                signPrice: '',
                isCenterPush: '',
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },
        // 重置按钮
        searchReset() {
            this.searchParam = {}
            this.pageRequest = {pageNum: 1, pageSize: 10}
            this.getList()
        },
        getTypeList() {
            getJdMatchTypeList().then(response => {
                response = response.result
                this.typeList = response.content
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
    },
    created() {
        this.getList();
        this.getTypeList();
    },
}
</script>
